<template>
	<view class="my-content">
		<Title :title="$t('选择服务')"></Title>
		<u-card margin="0" :show-head="false">
			<view slot="body">
				<view>{{$t("累计获客")}}</view>
				<view class="u-flex u-margin-top-30 u-margin-bottom-30">
					<u-button type="primary" :custom-style="type === 'bf' ? btnActiveStyle : btnDefaultStyle"
						hover-class="none" @click="changeType('bf')" class="u-margin-right-20">
						{{$t("批量拜访")}}
					</u-button>
					<u-button type="primary" :custom-style="type === 'qt' ? btnActiveStyle : btnDefaultStyle"
						hover-class="none" @click="changeType('qt')" class="u-margin-right-20">
						{{$t("商务洽谈")}}
					</u-button>
				</view>

				<view>{{$t("任务需求")}}</view>
				<view class="u-flex u-margin-top-30 u-flex-wrap">
					<view v-for="item in demandBtnList" :key="item.id" class="u-margin-right-20 u-margin-bottom-20"
						style="line-height: 0;">
						<ButtonPlain :active="demandBtnId === item.id" width="190rpx" @click="demandBtnId = item.id">
							{{item.name}}
						</ButtonPlain>
					</view>
				</view>
			</view>
		</u-card>

		<u-card margin="0" :show-head="false" class="u-margin-top-30">
			<view slot="body">
				<view>{{type === 'bf' ? $t("通话数量") : $t("通话时长")}}</view>
				<view class="u-flex u-margin-top-30 u-margin-bottom-10 u-flex-wrap">
					<view v-for="item in callBtnList" :key="item.id" class="u-margin-right-20 u-margin-bottom-20"
						style="line-height: 0;">
						<ButtonPlain :active="callBtnId === item.id" width="130rpx" @click="callBtnId = item.id">
							{{item.name}}
						</ButtonPlain>
					</view>
				</view>
				<view>{{$t("包含服务")}}</view>
				<view class="u-flex u-margin-top-20 u-flex-wrap" style="margin-bottom: -20rpx;">
					<u-tag v-for="item in serverList" :key="item.id" :text="item.name" bg-color="#fffde9"
						border-color="transparent" color="#ffb20d" class="serverBtn" type="warning" />
				</view>
			</view>
		</u-card>
		<Title :title="$t('上传材料')"></Title>
		<u-card margin="0" :show-head="false">
			<view slot="body">
				<view class="u-margin-bottom-30">{{$t("添加拜访名单")}}</view>
				<u-input height="60" border :placeholder="$t('选择拜访名单')" v-model="bfListName" disabled
					@click="toCheckBfList" :custom-style="myStyle" style="border-radius: 0;" />

				<view class="u-flex u-row-between u-margin-top-30" v-if="checkListData.length > 0">
					<view class="bfCheckCard">
						<view>{{$t("企业数量")}}</view>
						<view class="number">{{bfListEntNum}}</view>
					</view>
					<view style="width: 30rpx;"></view>
					<view class="bfCheckCard">
						<view>{{$t("电话数量")}}</view>
						<view class="number">{{bfListTelNum}}</view>
					</view>
				</view>
			</view>
		</u-card>

		<u-card margin="0" :show-head="false" class="u-margin-top-30">
			<view slot="body">
				<view class="u-margin-bottom-20">{{$t("企业对接人")}}</view>
				<view class="u-margin-bottom-20">
					<u-input height="60" :placeholder="$t('请输入')" :custom-style="myStyle1"
						:placeholder-style="placeholderStyle" />
				</view>
				<view class="u-margin-bottom-20">{{$t("联系电话")}}</view>
				<view class="u-margin-bottom-20">
					<u-input height="60" :placeholder="$t('请输入')" :custom-style="myStyle1"
						:placeholder-style="placeholderStyle" />
				</view>
				<view class="u-margin-bottom-20">{{$t("微信")}}</view>
				<view class="u-margin-bottom-20">
					<u-input height="60" :placeholder="$t('请输入')" :custom-style="myStyle1"
						:placeholder-style="placeholderStyle" />
				</view>
				<view class="u-margin-bottom-20">{{$t("邮箱")}}</view>
				<view class="u-margin-bottom-20">
					<u-input height="60" :placeholder="$t('请输入')" :custom-style="myStyle1"
						:placeholderStyle="placeholderStyle" />
				</view>
			</view>
		</u-card>

		<u-tabs bg-color="transparent" active-color="#ff4a17" :list="tabList" :is-scroll="false" :current="tabCurrent"
			@change="tabChange"></u-tabs>

		<u-card margin="0" :show-head="false" class="u-margin-top-30">
			<view slot="body">
				<u-read-more show-height="300" color="#ff4a17" :close-text="$t('查看全部')">
					<view class="richText">
						<rich-text :nodes="content"></rich-text>
					</view>
				</u-read-more>
			</view>
		</u-card>
		<MoneyFooterVue :text="$t('预估费用')" :money="moneyTotal">
			<template>
				<u-button type="primary" :custom-style="customStyle1" hover-class="none" @click="back()"
					class="u-margin-right-20">
					{{$t("取消")}}
				</u-button>
				<u-button type="primary" :custom-style="customStyle" hover-class="none" @click="submit()">
					{{$t("确认下单")}}
				</u-button>
			</template>
		</MoneyFooterVue>
	</view>
</template>

<script>
	import Title from '../components/Title.vue'
	import ButtonPlain from '../components/ButtonPlain.vue'
	import MoneyFooterVue from '../components/MoneyFooter.vue';
	export default {
		components: {
			Title,
			ButtonPlain,
			MoneyFooterVue
		},
		computed: {
			bfListName() {
				return this.checkListData.map(item => item.title)
			},
			bfListEntNum() {
				let sum = this.checkListData.reduce(function(prev, cur, index, arr) {
					return prev + parseInt(cur.enterpriseNum);
				}, 0);
				return sum
			},
			bfListTelNum() {
				let sum = this.checkListData.reduce(function(prev, cur, index, arr) {
					return prev + parseInt(cur.telNum);
				}, 0);
				return sum
			},
		},
		data() {
			return {
				type: 'bf', //bf 批量拜访 qt 商务洽谈
				btnActiveStyle: {
					background: '#ff4a17',
					'border-radius': '5rpx',
					color: '#fff',
					width: '300rpx',
					height: '60rpx',
				},
				btnDefaultStyle: {
					background: '#f1f1f1',
					'border-radius': '5rpx',
					color: '#cccccc',
					width: '300rpx',
					height: '60rpx',
				},
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '35rpx',
					'min-width': '190rpx',
					height: '70rpx',
				},
				customStyle1: {
					background: 'transparent',
					'border-radius': '35rpx',
					border: '1rpx solid #ff4a17',
					color: '#ff4a17',
					'min-width': '190rpx',
					height: '70rpx',
				},
				//任务需求按钮list
				demandBtnList: [],
				demandBtnId: '1',
				// 通话时长 or 通话数量按钮list
				callBtnList: [{
					name: '500',
					id: '1'
				}, {
					name: '1000',
					id: '2'
				}, {
					name: '1500',
					id: '3'
				}],
				callBtnId: '1',
				//包含服务list
				serverList: [{
					name: '通话录音',
					id: '1'
				}, {
					name: '通话录音',
					id: '2'
				}, {
					name: '通话录音',
					id: '3'
				}, {
					name: '通话录音',
					id: '4'
				}, {
					name: '通话录音',
					id: '5'
				}],
				myStyle: {
					textAlign: 'left',
					pointerEvents: "none"
				},
				placeholderStyle: `fontSize: 24rpx`,
				myStyle1: {
					borderBottom: '1rpx solid #ccc',
					fontSize: '24rpx'
				},
				tabList: [{
					name: '合作须知'
				}, {
					name: '服务介绍'
				}],
				tabCurrent: 0,
				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
								苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
								无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
								无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
				moneyTotal: "1000",
				checkListData: [],
			};
		},
		onLoad(option) {
			this.type = option.type;
			this.taskRequirements();
		},
		methods: {
			taskRequirements(){
				this.$u.api.basic.taskRequirements({
				}).then(res => {
					console.log(res)
					this.demandBtnList=res
				}).catch(err => {
					this.$u.toast(err)
				})
			},
			changeType(type) {
				this.type = type;
			},
			//选择拜访名单后回传的参数
			checkOver(data) {
				console.log('placeOrder', data);
				this.checkListData = data;
			},
			toCheckBfList() {
				//跳转选择拜访名单列表
				this.$u.route({
					url: 'pages/teleSales/favoriteList/favoriteList',
					params: {
						type: 'bf',
						check: true
					}
				})
			},
			tabChange(index) {
				this.tabCurrent = index;
			},
			//取消
			back() {
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			},
			//确认下单
			submit() {

			}
		}
	}
</script>

<style lang="scss">
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;
		padding: 10rpx 30rpx;
		padding-bottom: 140rpx;

		.serverBtn {
			font-size: 24rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
		}

		.bfCheckCard {
			background: #f6f6f6;
			width: 100%;
			border-radius: 10rpx;
			text-align: center;
			font-size: 30rpx;
			padding: 25rpx 0;

			.number {
				margin-top: 10rpx;
				font-size: 44rpx;
				font-weight: 800;
			}
		}

		.richText {
			background-color: #f1f1f1;
			padding: 20rpx 20rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			color: #999;

		}

	}
</style>